<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改信息</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"> 
<link rel="stylesheet" type="text/css" href="css/edit.css">  
</head>
<body>

<div class="layui-container">
	<div class ="layui-row">
		<div class="layui-col-md4 layui-col-md-offset4">
			<form action="user/userEdit" method="post" class="layui-form">
				<h1>修改信息</h1>
				<h4>${error}</h4>
				<input type="hidden" name ="id" value="${sessionScope.user.id}">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						 <input type="text" name="username" disabled="disabled" class="layui-input" value="${sessionScope.user.username }">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"> 旧密码</label>
					<div class="layui-input-inline">
						 <input type="password" name="password" placeholder="请输入 旧密码" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"> 新密码</label>
					<div class="layui-input-inline">
						 <input type="password" name="newpassword" placeholder="请输入 新密码 " class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"> 确认密码</label>
					<div class="layui-input-inline">
						 <input type="password" name="repassword" placeholder="请输入确认密码 " class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"> 真实姓名</label>
					<div class="layui-input-inline">
						 	<input type="text" name="relname" value="${sessionScope.user.relname }" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"> 电话</label>
					<div class="layui-input-inline">
							<input type="text" name="phone" value="${sessionScope.user.phone }" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<input type="hidden" name="head" value="upload/${sessionScope.user.head }">
					<label class="layui-form-label">头像</label>
					<div class="layui-input-inline">
						<div class="layui-upload">
							<div class="layui-upload-list">
								<c:if test="${sessionScope.user.head != null}">
									<img class="layui-upload-img" id="demo1" src="upload/${sessionScope.user.head }" style="width:92px;height:92px;">
								</c:if>
								<c:if test="${sessionScope.user.head == null}">
									<img class="layui-upload-img" id="demo1" src="img/6.gif" style="width:92px;height:92px;">
								</c:if>
								
								<p id="demoText"></p>
							</div>
							<div style="width: 95px;">
								<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
									<div class="layui-progress-bar" lay-percent=""></div>
								</div>
							</div>
							<button type="button" class="layui-btn layui-btn-normal" id="test1">上传图片</button>
						</div> 
					</div>
				</div>
				
				
				<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<input type="submit" value="修改" class="layui-btn layui-btn-primary layui-border-blue">
					<a href="user/indext" class="layui-btn layui-btn-primary layui-border-blue">返回</a>
				</div>
			</div>
		</form>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript">
		layui.use(['upload', 'element', 'layer'], function(){
			  var $ = layui.jquery
			  ,upload = layui.upload
			  ,element = layui.element
			  ,layer = layui.layer;
			  
			  //常规使用 - 普通图片上传
			  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: 'upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			      
			      element.progress('demo', '0%'); //进度条复位
			      layer.msg('上传中', {icon: 16, time: 0});
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功的一些操作
			      $("input[name='head']").val(res.data);
			      //……
			      $('#demoText').html(''); //置空上传失败的状态
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			    //进度条
			    ,progress: function(n, elem, e){
			      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
			      if(n == 100){
			        layer.msg('上传完毕', {icon: 1});
			      }
			    }
			  });
		});
		</script>
		</div>
	</div>
</div> 
</body>
</html>